import { useEffect } from "react";
import { IRouteComponentProps, KnowledgeModelState, Link, useDispatch, useSelector, history } from "umi"
import { Empty, Button } from "antd"
import styles from "./KnowledgeDetail.less"
import { YYYY_MM_DD } from "../../../components/timer"
import { RightOutlined } from "@ant-design/icons"
import Rightother from "@/components/rightcomp/rightother/rightother"
import ImageViewer from "@/components/ImageViewer";
const KnowledgeDetail: React.FC<IRouteComponentProps<{ kid: string }>> = ({ match }) => {
    // console.log("props.......",props);
    const id = match.params.kid;
    // console.log(id,"++++++++++=");

    // 通过useSelector获取model数据
    const { knowledgsId } = useSelector((state: { knowledge: KnowledgeModelState }) => state.knowledge);
    // console.log(knowledgsId,"222222222222222222222222222");

    // 通过useDispatch获取dispatch
    const dispatch = useDispatch();

    useEffect(() => {
        dispatch({
            type: "knowledge/getKnowLedgeId",
            payload: id
        })
    }, [location.pathname])
    return <div className="container content">
        <div className={styles.KnowledgeDetailBox}>
            <div className={styles.lefts}>

                {knowledgsId && knowledgsId.children ? (
                    <div className={styles.knowledgeBox}>
                        <div className={styles.link}>
                            <span>
                                <Link to="/knowledge" className={styles.link}>
                                    知识小册
                                </Link>{''}
                            </span>
                            / <span>{knowledgsId.title}</span>

                        </div>
                        <header className={styles.bcss}>
                            <b >{knowledgsId.title}</b>
                        </header>
                        <ImageViewer>
                            <div className={styles.corp}>


                                <div className={styles.imgs}>
                                    <img src={knowledgsId.cover} alt="" />
                                </div>
                                <div className={styles.corp_footer}>
                                    <b>{knowledgsId.title}</b>
                                    <p>{knowledgsId.summary}</p>
                                    <p>
                                        <span className={styles.timers}>{knowledgsId.views}次阅读</span>
                                        <span>&nbsp;·&nbsp;</span>
                                        <span className={styles.timers}>{YYYY_MM_DD(knowledgsId.updateAt)}</span>
                                    </p>
                                    <Button
                                        className={styles.Detail_Btn}
                                        onClick={() => {
                                            history.push(`/knowledge/${knowledgsId.id}/${id}`)
                                        }}
                                    >
                                        开始阅读
                                    </Button>
                                </div>

                            </div>
                        </ImageViewer>
                        <div className={styles.Detail_ul}>
                            {knowledgsId.children && knowledgsId.children.length > 0 ? (
                                knowledgsId.children.map((item) => {

                                    return (
                                        <ul className={styles.Delite_ul_li} key={item.id} onClick={() => {
                                            history.push(`/knowledge/${knowledgsId.id}/${item.id}`)
                                        }}>
                                            <li>
                                                <span className={styles.Detail_li_span}>{item.title}</span>
                                                <span className={styles.Delite_ul_li_span}>
                                                    {YYYY_MM_DD(item.updateAt)}

                                                </span>
                                            </li>
                                        </ul>
                                    );
                                })
                            ) : (
                                <div>暂无数据</div>
                            )}
                        </div>
                    </div>
                ) : (
                    <div>
                        <Empty />
                    </div>
                )}
            </div>
            <div className={styles.rightbox}>
                <Rightother />
            </div>
        </div>

    </div>

}
export default KnowledgeDetail;